<script setup>
import {getCurrentInstance, h, onMounted, ref, watch} from "vue";
import processRunHistoryApi from '@/api/process/processRunHistoryApi'
import {useRouter} from "vue-router";
import {nextTick} from "@/utils";

const runDateList = ref([])
const runDateValue = ref();
const search = ref();
const tableRef = ref();
const stepTableRef = ref();
const stepDataDiag = ref(false);
const stepDataTableRef = ref();
onMounted(() => {
	queryRunDateList();
});

const columns = ref(
	[
		{
			title: 'id',
			dataIndex: 'processId',
			key: 'processId',
			ellipsis: true,
		},
		{
			title: '流程名称',
			dataIndex: 'processName',
			key: 'processName',
			ellipsis: true,
		},
		{
			title: '流程版本',
			dataIndex: 'processVersion',
			resizable: true,
			key: 'processVersion',
			ellipsis: true,
		},
		{
			title: 'tid',
			dataIndex: 'tid',
			key: 'tid',
			ellipsis: true,
		},
		{
			title: 'dbFile',
			dataIndex: 'dbFile',
			key: 'dbFile',
			ellipsis: true,
		}
	]
)

const stepColumns = ref(
	[
		{
			title: 'source',
			dataIndex: 'source',
			key: 'source',
			ellipsis: true,
		},
		{
			title: 'target',
			dataIndex: 'target',
			key: 'target',
			ellipsis: true,
		},
		{
			title: '操作',
			key: 'action',
			width: 90,
			dataIndex: 'action',
			ellipsis: true,
			fixed: 'right',
			buttonList: [

				{
					type: 'primary',
					click: (field, record) => {
						currentRowData.value.source = record.source;
						currentRowData.value.target = record.target;
						stepDataDiag.value = true;

						nextTick(() => {
							stepDataTableRef.value.refresh();
						})
					},
					render: (record) => {
						return "数据";
					}
				},
				{
					click: (field, record) => {
						currentRowData.value.source = record.source;
						currentRowData.value.target = record.target;
						//
						sqlRunner(currentRowData.value);
					},
					render: (record) => {
						return "sql";
					}
				}
			]
		}
	]
)

const stepDataColumns = ref([]);

const queryRunDateList = async () => {
	runDateList.value = await processRunHistoryApi.queryRunDateList();
}

const queryProcessList = async () => {
	return await processRunHistoryApi.queryProcessList({
		dateList: runDateValue.value,
		keywords: search.value
	});
}
const currentRowData = ref();

const rowClick = (data) => {
	currentRowData.value = data;
	stepTableRef.value.refresh();

}


const router = useRouter()

const sqlRunner = (r) => {
	let i = window.btoa(encodeURIComponent(JSON.stringify(r)));


	router.push({
		path: '/datasource/sqlRunner',
		query: {
			id: i,
			type: r.type
		}
	})
}


const queryStepList = async () => {
	if (!currentRowData.value) {
		return [];
	}
	return await processRunHistoryApi.queryStepList({
		...currentRowData.value
	});
}

const queryStepDataList = async () => {
	if (!currentRowData.value) {
		return [];
	}
	const b = await processRunHistoryApi.queryStepDataList({
		...currentRowData.value
	});

	if (!b) {
		return;
	}
	const bc = [];
	for (const c in b.columns) {

		bc.push({
			title: c,
			dataIndex: c,
			key: c,
			ellipsis: true,
		})
	}
	stepDataColumns.value = bc;

	return b.data;


}
</script>

<template>
	<a-row class="mb-2">
		<a-col :span="24">
			<a-card>
				<a-space>
					<a-input-search placeholder="请输入内容" v-model:value="search"
									@search="tableRef.refresh()">
					</a-input-search>

					<a-select v-model:value="runDateValue" style="width: 200px" :maxTagCount="1" allow-clear
							  mode="multiple" placeholder="请选择" size="normal">
						<a-select-option v-for="item in runDateList" :key="item" :label="item" :value="item"/>
					</a-select>

					<a-button type="primary" @click="tableRef.refresh()">查询</a-button>
				</a-space>
			</a-card>
		</a-col>
	</a-row>

	<a-row class="mb-2">
		<a-col :span="24">
			<a-card>
				<h-table ref="tableRef" :rowClick="rowClick" :paged="false" :columns="columns" :data="queryProcessList"
						 height="200px">

				</h-table>

			</a-card>
		</a-col>
	</a-row>

	<a-row>
		<a-col :span="24">
			<a-card>
				<h-table ref="stepTableRef" :paged="false" :columns="stepColumns" :data="queryStepList" height="calc(40vh)">

				</h-table>

			</a-card>
		</a-col>
	</a-row>

	<a-drawer title="数据" :width="650" :mask="true" :closable="true" v-model:open="stepDataDiag">
		<a-row>
			<a-col :span="24">
				<a-card>
					<h-table ref="stepDataTableRef" :paged="false" :columns="stepDataColumns" :data="queryStepDataList">

					</h-table>

				</a-card>
			</a-col>
		</a-row>

	</a-drawer>
</template>

<style scoped></style>
